<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocketTest</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: rgb(243, 239, 8); */
  }

  .anniu,
  .anniu::after {
    font-family: 'Do Hyeon', sans-serif;
    width: 260px;
    height: 80px;
    text-align: center;
    font-size: 22px;
    line-height: 80px;
    color: rgb(255, 251, 251);
    background: linear-gradient(30deg, transparent 10%, rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
    box-shadow: 5px 0 0 rgb(0, 204, 255);
    cursor: pointer;
    position: relative;
  }

  .anniu::after {
    content: 'Aurora Borealis night';
    position: absolute;
    top: 0;
    left: 0;
    text-shadow: -5px -2px 0 rgb(0, 183, 255),
      5px 2px 0 rgb(0, 255, 115);
    visibility: hidden;
  }

  .anniu:hover::after {
    animation: san 1s;
    animation-timing-function: steps(1, end);
  }

  @keyframes san {
    0% {
      clip-path: inset(20% -5px 60% 0);
      transform: translate(-6px, 5px);
      visibility: visible;
    }

    10% {
      clip-path: inset(50% -5px 30% 0);
      transform: translate(6px, -5px);
    }

    20% {
      clip-path: inset(20% -5px 60% 0);
      transform: translate(5px, 0px);
    }

    30% {
      clip-path: inset(80% -5px 5% 0);
      transform: translate(-8px, 5px);
    }

    40% {
      clip-path: inset(0 -5px 80% 0);
      transform: translate(-4px, -3px);
    }

    50% {
      clip-path: inset(50% -5px 30% 0);
      transform: translate(-6px, -5px);
    }

    60% {
      clip-path: inset(80% -5px 5% 0);
      transform: translate(-7px, 5px);
    }

    70% {
      clip-path: inset(0 -5px 80% 0);
      transform: translate(3px, 6px);
    }

    80% {
      clip-path: inset(50% -5px 30% 0);
      transform: translate(5px, 5px);
    }

    90% {
      clip-path: inset(20% -5px 60% 0);
      transform: translate(6px, -5px);
    }

    100% {
      clip-path: inset(0 -5px 80% 0);
      transform: translate(1px, 5px);
    }
  }
</style>
</head>

<body>
  <div class="anniu">Aurora Borealis night</div>

  <div class="quan">
    <div class="shui"></div>
  </div>
</body>
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(240, 228, 228);
  }

  .quan {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid rgb(246, 247, 248);
    box-shadow: 0 0 0 3px rgb(41, 134, 196);
  }

  .shui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(23, 106, 201);
    border-radius: 50%;
    overflow: hidden;
  }

  .shui::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 40%;
    background-color: rgb(240, 228, 228);
    animation: shi 5s linear infinite;
  }

  @keyframes shi {
    0% {
      transform: translate(-50%, -65%) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -65%) rotate(360deg);
    }
  }

  .shui::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 150%;
    height: 150%;
    border-radius: 42%;
    background-color: rgb(240, 228, 228, 0.2);
    animation: xu 7s linear infinite;
  }

  @keyframes xu {
    0% {
      transform: translate(-50%, -60%) rotate(0deg);
    }

    100% {
      transform: translate(-50%, -60%) rotate(360deg);
    }
  }
</style>

</html>